<template>
  <!-- 最外层页面于窗口同宽，使聊天面板居中 -->
  <div class="home-view">
    <!-- 整个聊天面板 -->
    <div class="chat-panel" style="height: 80vh;">
      <!-- 左侧的会话列表 -->
      <div class="session-panel">
        <div class="title">论坛中心</div>
        <div class="description">{{store.getters.name}}:欢迎来到论坛中心</div>
      </div>
      <!-- 右侧的消息记录 -->
      <div class="message-panel">
        <div class="message-list">
          <el-card class="list" v-for="(message, index) in messages" :key="index">
            <div slot="header" class="clearfix">
              <span>行号 {{ index + 1 }}</span>
              <el-button style="float: right;" type="text" @click="deleteMessage(index)">删除</el-button>
            </div>
             <p>{{ message }}</p>
          </el-card>
        </div>
        <div class="my-message-input">
          <el-input v-model="input"
                    :autosize="false"
                    :rows="3"
                    resize="none"
                    type="textarea"
                    placeholder="请输入留言内容"></el-input>
          <div class="button-wrapper">
            <el-button class="button-wrapper" @click="addMessage" type="primary" style="padding-left: 20px;">发送消息
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import store from "@/store";

export default {
  computed: {
    store() {
      return store
    }
  },
  created() {
  },
  data() {
    return {
      messages: [],
      input: ''
    }
  },
  methods: {
    addMessage() {
      this.messages.push(`${store.getters.name}:${this.input}`)
      this.input = ''
    },
    deleteMessage(index) {
      this.messages.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.home-view {
  display: flex;
  /* 与窗口同宽 */
  width: 100vw;
  /* 水平方向上剧中 */
  justify-content: center;
  /* 聊天窗口面板 */
  .chat-panel {
    /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
    display: flex;
    /* 让聊天面板圆润一些 */
    border-radius: 20px;
    background-color: white;
    /* 给一些阴影 */
    box-shadow: 0 0 20px 20px rgba(black, 0.05);
    /* 与上方增加一些间距 */
    margin-top: 20px;
    /* 与上方增加一些间距 */
    margin-bottom: 20px;
    /* 左侧聊天会话面板*/
    .session-panel {
      background-color: rgb(231, 248, 255);
      width: 300px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      padding: 20px;
      position: relative;
      border-right: 1px solid rgba(black, 0.07);
      /* 标题*/
      .title {
        margin-top: 20px;
        font-size: 20px;
      }

      /* 描述*/
      .description {
        color: rgba(black, 0.7);
        font-size: 10px;
        margin-top: 10px;
      }
    }

    /* 右侧消息记录面板高宽配置*/
    .message-panel {
      width: 1000px;
      .message-list {
        width: 1000px;
        height: 60vh;
        padding: 15px;
        // 消息条数太多时，溢出部分滚动
        overflow-y: scroll;
        // 当切换聊天会话时，消息记录也随之切换的过渡效果
        .list-enter-active,
        .list-leave-active {
          transition: all 0.5s ease;
        }

        .list-enter-from,
        .list-leave-to {
          opacity: 0;
          transform: translateX(30px);
        }
      }
    }

    .my-message-input {
      padding: 20px;
      border-top: 1px solid rgba(black, 0.07);
      border-left: 1px solid rgba(black, 0.07);
      border-right: 1px solid rgba(black, 0.07);
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }

    .button-wrapper {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }

}

</style>
